<template>
  <div class="all">
    <div class="title">消息</div>
    <div class="content">
      <div class="notice shadow">
        <div class="chat">
          <div class="cell">
            <img src="../../assets/chatimg01.png" class="header" />
            <div class="name">
              <div>通知消息</div>
              <div>你当前没有最新的通知消息</div>
            </div>
            <div style="flex: 1" />
            <van-badge v-show="false" :content="1">
              <div>&emsp;</div>
            </van-badge>
            <div />
          </div>
          <div class="cell">
            <img src="../../assets/chatimg02.png" class="header" />
            <div class="name">
              <div>系统通知</div>
              <div>你当前没有最新的通知消息</div>
            </div>
            <div style="flex: 1" />
            <van-badge v-show="false" :content="1">
              <div>&emsp;</div>
            </van-badge>
            <div />
          </div>
          <div class="cell" @click="contactCustomerService">
            <img src="../../assets/chatimg03.png" class="header" />
            <div class="name">
              <div>
                <span>联系客服</span>
                <span>(点击进入对话)</span>
              </div>
              <div>工作时间：周一至周五 09:00-18:00</div>
            </div>
            <div style="flex: 1" />
            <van-badge v-show="false" :content="1">
              <div>&emsp;</div>
            </van-badge>
            <div />
          </div>
        </div>
      </div>
      <div class="tips">以下是聊天消息</div>
      <div class="chat shadow">
        <div
          v-for="(item, index) in conversationList"
          :key="index"
          class="cell"
          @click="jumptodeteil(item.conversation_id, item.get_uid)"
        >
          <img v-show="item.no_read == 0" :src="item.avatar" class="header" />
          <van-badge v-show="item.no_read != 0" :content="item.no_read">
            <img :src="item.avatar" class="header" />
          </van-badge>
          <div class="name">
            <div class="box1">{{ item.name }}</div>
            <div class="box2">{{ item.last_message }}</div>
          </div>
          <div style="flex: 1" />
          <div class="time">{{ item.update_time }}</div>
        </div>
      </div>
      <div v-show="conversationList.length == 0" class="chat shadow">
        <div class="nochat">暂无聊天信息</div>
      </div>
    </div>
  </div>
</template>

<script>
import { _local } from "@/utils/storage";

export default {
  data() {
    return {
      conversationList: [],
      page: 1,
    };
  },
  created() {
    const _this = this;
    _this.imUser = _local.get("imUser");
    _this.getConversationList();
    _this.$global.ws.onmessage = function (e) {
      console.log(e.data);
      let msg = JSON.parse(e.data);
      if (msg.type == "login") {
        fetch(`${_this.$imUrl}/im/bind`, {
          method: "POST",
          headers: {
            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
            token: _this.imUser.imToken,
          },
          body: `client_id=${msg.client_id}`,
        })
          .then((res) => res.json())
          .then((res) => {
            console.log("绑定", res);
            _this.$store.dispatch("im/setUnReadCount", {
              unReadCount: _local.get("unReadCount") || res.data.no_read_all,
            });
          });
      } else if (msg.type == "say") {
        _this.getConversationList();
        _local.set("unReadCount", msg.no_read_all);
        _this.$store.dispatch("im/setUnReadCount", {
          unReadCount: msg.no_read_all,
        });
      }
    };
  },
  methods: {
    contactCustomerService() {
      this.$router.push({
        path: "/chatcontent",
        query: { sendId:1},
      });
    },
    getConversationList() {
      const _this = this;
      fetch(`${_this.$imUrl}/im/conversation_list`, {
        method: "POST",
        headers: {
          "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
          token: _this.imUser.imToken,
        },
        body: `page=${_this.page}&limit=100`,
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("getConversationList", res);
          if (res.code == 200 || res.code == 201) {
            _this.conversationList = res.data;
          }
        });
    },
    jumptodeteil(e, f) {
      this.$router.push({
        path: "/chatcontent",
        query: { targetId: e, sendId: f },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  padding: 10px 10px;
  font-size: 17px;
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  z-index: 10000;
  text-align: center;
  border-bottom: 1px solid #f1f1f1;
}
.shadow {
  box-shadow: 0px 1px 10px 5px #eee;
}
.content {
  padding: 15px;
  .notice {
    background-color: #fff;
    border-radius: 15px;
    width: 100%;
    height: 220px;
  }
  .tips {
    margin: 20px 0;
    text-align: center;
    font-size: 13px;
    color: #999;
  }
  .chat {
    background-color: #fff;
    border-radius: 15px;
    .cell {
      padding: 15px;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header {
        width: 35px;
        height: 35px;
      }
      .name {
        margin-left: 15px;
        & > div:first-child {
          span:nth-child(1) {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 5px;
            margin-right: 2px;
          }
          span:nth-child(2) {
            font-size: 12px;
            color: #999;
          }
        }
        .box1 {
          font-size: 15px;
          font-weight: bold;
          color: #333;
        }
        .box2 {
          margin-top: 5px;
          font-size: 12px;
          color: #666;
          max-width: 30vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .time {
        font-size: 12px;
        color: #666;
      }
    }
    .nochat {
      padding: 10px 0;
      text-align: center;
      color: #333;
      font-size: 14px;
    }
  }
}
</style>
